<template>
  <div>

    <div class="bg">
      <div class="bgbox">

        <div class="title">

          <!-- <van-image :src="require('../../assets/img/home/Tick.png')" fit="cover" /> -->
          <van-image :src="require('../../assets/img/home/Tick.png')" fit="cover"></van-image>

          <p>评价成功!</p>
        </div>
      </div>

    </div>

    <div class="commonBox">
      <div class="Box" v-if="$route.query.type">

        <div class="Box_top">
          <div class="image">
            <van-image :src="`${resourceURL}${order.top_pic}`" />
          </div>
          <div class="right">
            <div class="top">
              <div class="name">{{order.service_name}}</div>
              <div class="status">{{order.state==3?"已完成":"已预约"}}</div>
            </div>
            <div class="center">{{formatCreateTime(order.make_time)}}</div>
            <div class="price">
              <span style="font-weight:400">已付订金</span> ￥{{order.pay_amount}}
            </div>
          </div>

        </div>

      </div>
      <div v-if="!$route.query.type">
        <van-card :num="item.quantity" :price="item.mprice" :desc="item.p_s_name" :title="item.product_name" :thumb="`${resourceURL}${item.cover_url}`" v-for="(item,index) in detail" :key="index" />
      </div>
      <div class="line"></div>
      <div class="content">{{$store.state.content}}</div>
      <div class="imgList">
        <van-image v-for="(item,index) in $store.state.image" :key="index" :src="`${resourceURL}${item}`" />
      </div>
    </div>
    <div class="submit">
      <van-button type="primary" class="btn" round plain block @click="$router.replace('/')">返回首页</van-button>

    </div>
  </div>
</template>
<script>
export default {
  name: '',
  components: {

  },
  mixins: [],
  props: {

  },
  data () {
    return {
      order: {},
      detail: {},
      content: this.$store.state.content
    }
  },
  computed: {

  },
  watch: {

  },
  mounted () {


  },
  created () {
    if (this.$route.query.type) {
      this.orderserviceinfo()
    } else {
      this.getorderdetail()
    }
  },
  methods: {
    //时间转化
    formatCreateTime (val) {
      return this.$moment(val).calendar(null, {
        sameDay: "MM月DD日 [今天] HH:mm:ss",
        nextDay: "MM月DD日 [明天] HH:mm:ss",
        nextWeek: "MM月DD日  HH:mm:ss",
        lastDay: "MM月DD日 [昨天] HH:mm:ss",
        lastWeek: "MM月DD日  HH:mm:ss",
      });
    },
    //获取团餐细节
    getorderdetail () {

      this.$axios
        .get(this.$api.getorderdetail, {
          params: {
            order_id: this.$route.query.order_id
          },
        })
        .then((res) => {

          this.detail = res.data.data.productinfo[0].detailinfo
          this.order = res.data.data.order

        });
    },
    //获取家政订单细节
    orderserviceinfo () {
      this.$axios
        .get(this.$api.orderserviceinfo, {
          params: {
            send_id: this.$route.query.send_id
          },
        })
        .then((res) => {
          this.order = res.data.data[0]

        });
    },
  }
};
</script>
<style lang='less' scoped>
/deep/ .van-card {
  background-color: white;
}
.line {
  height: 1px;
  margin-top: 12px;
  border-top: 1px dashed transparent;
  background: linear-gradient(#fff, #fff) padding-box,
    repeating-linear-gradient(
      -45deg,
      rgba(25, 23, 20, 0.1) 0,
      rgba(25, 23, 20, 0.2) 0.3em,
      #fff 0,
      #fff 0.6em
    );
}
.submit {
  position: fixed;
  left: 0;
  bottom: 24px;
  display: flex;
  width: 100%;
  padding: 6px 16px;
  background-color: transparent;
  box-sizing: border-box;
  .btn {
    border: 1px solid #ff7733;
    color: #ff7733;
  }
}
.bg {
  width: 100%;
  height: 139px;
  background: linear-gradient(135deg, #ff7733 0%, #ff4133 100%);
  border-radius: 0px 0px 16px 16px;
  opacity: 1;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  .title {
    display: flex;
    align-items: center;
    margin-top: 12px;
    p {
      margin-left: 6px;
      font-size: 20px;

      font-weight: bold;
      line-height: 0px;
      color: #ffffff;
    }
    /deep/ .van-image {
      width: 26px;
      height: 26px;
    }
  }
}
.commonBox {
  margin: 16px;

  padding: 0 16px;
  padding-top: 12px;
  width: 343px;

  background: #ffffff;
  border: 1px solid #f2f2f2;
  opacity: 1;
  border-radius: 10px;
  box-sizing: border-box;
  .goods {
    width: 311px;
    height: 72px;
    display: flex;
    box-sizing: border-box;

    .imgBox {
      width: 60px;
      height: 60px;
      border-radius: 10px;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .text {
      margin-left: 20px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;

      color: #303030;

      .price {
        margin-top: 24px;
      }
    }
  }
  .content {
    margin-top: 20px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    line-height: 0px;
    color: #303030;
    white-space: wrap;
  }
}
.imgList {
  margin-top: 30px;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  .van-image {
    margin-left: 4px;
    width: 100px;
    height: 100px;
  }
}
.van-image:first-child {
  margin-left: 0px;
}
.Box {
  width: 343px;

  background: #ffffff;
  border-radius: 10px 10px 10px 10px;
  opacity: 1;

  padding: 16px;
  padding-bottom: 0px;
  box-sizing: border-box;
  margin: 0 auto;
  margin-top: -16px;
  margin-left: -16px;
  /deep/ .van-image {
    width: 100px;
    height: 80px;
  }
  .Box_top {
    display: flex;
    .right {
      flex: 1;
      margin-left: 12px;
      .top {
        display: flex;
        justify-content: space-between;
        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        .name {
          font-size: 16px;

          font-weight: bold;
          color: #06021a;
        }
        .status {
          font-size: 14px;

          font-weight: 400;
          color: #ff7733;
        }
      }
      .center {
        font-size: 14px;
        margin-top: 12px;
        font-weight: 400;
        color: #303030;
      }
    }
    .price {
      margin-top: 6px;
      font-size: 14px;
      font-family: Microsoft YaHei-Bold, Microsoft YaHei;
      font-weight: bold;
      color: #06021a;
    }
  }
}
</style>